import React, { Component } from 'react';
import httpUtil from '../../utils/HttpUtil';
import '../../styles/RankingLabel.scss';
import produce from 'immer';
import moment from 'moment';
import { pxToRem, pxToPx,pxToVh } from '../../utils/adaptive.js';
class OutputTable extends Component {
    constructor(props) {
        super(props);
        this.state = {
            arr: [],
            index: -1,

        }
        // this.timer();
    }
    componentDidMount() {
        this.setState({
            arr: this.props.data || [],
        })
        // this.setActive();
    }
    componentWillReceiveProps(nextProps) {
        let dataArr = [];
        let data = nextProps.data;
        data && data.client_sign && data.client_sign.map((item, i) => {
            let itemObj = {
                client_sign: data.client_sign[i],
                hosp_name: data.hosp_name[i],
                client_back: data.client_back[i],
                // client_profit: data.client_profit[i],
                client_income: data.client_income[i],
                client_cost: data.client_cost[i],
                client_people: data.client_people[i],
                client_signtime: moment(data.client_signtime[i]).format('YYYY/MM/DD'),
                client_signtimes: data.client_signtimes[i],
            }
            dataArr.push(itemObj);
        });
        this.setState({
            arr: dataArr
        })
        // this.setActive();
    }
    setActive = () => {
        const refreshBubble = this.props.refreshBubble;
        // this.timer = setInterval(() => {
        let index = this.state.index;
        if (index < this.state.arr.length - 1) {
            index++;
            this.setState({
                index
            })
        } else {
            index = 0;
            this.setState({
                index
            })
        }
        if (typeof refreshBubble === 'function') {
            refreshBubble(this.state.arr[index]);
        }
        // }, 3000)
    }
    render() {

        const rankingClassName = this.state.arr.length == 5 ? 'ranking5' : 'ranking10';
        return (
            <div className='ranking-label output-table' style={{ paddingTop: `${pxToVh(14)}` }}>
                <div className={rankingClassName}>
                </div>
                <table>
                    <colgroup>
                        <col width={pxToRem(50)}></col>
                        <col width={pxToRem(203)}></col>
                        <col width={pxToRem(80)}></col>
                        <col width={pxToRem(80)}></col>
                        <col width={pxToRem(105)}></col>
                    </colgroup>
                    <thead>
                        <tr>
                            <th style={{ textAlign: 'center', paddingLeft: `${pxToVh(5)}` }}>
                                排名
                            </th>
                            <th>
                                客户名称
                            </th>
                            <th>
                                累计签约(万)
                            </th>
                            <th>
                                累计回款(万)
                            </th>
                            <th>
                                累计收入(万)
                            </th>

                        </tr>
                    </thead>
                    <tbody>
                        {
                            this.state.arr.map((item, i) => {
                                let styleName = '';
                                switch (i) {
                                    case 0:
                                        styleName = 'guanjun';
                                        break;
                                    case 1:
                                        styleName = 'yajun';
                                        break;
                                    case 2:
                                        styleName = 'jijun';
                                        break;
                                    default:
                                        styleName = '';
                                        break;
                                }
                                let borderstyle = {};
                                if (i % 2 !== 0 && i === this.state.arr.length - 1) borderstyle.borderBottom = '1px solid rgba(74, 174, 255,0.2)'
                                return (<tr className={i === this.state.index ? 'active' : ''} style={borderstyle} key={i}>
                                    <td style={{ textAlign: 'right', paddingRight: `${pxToVh(10)}` }}>
                                        <i className={`icon iconfont icon-dapingicon_${styleName} yellow`}></i>
                                        <span className='ranking-color'>
                                            {i + 1}
                                        </span>
                                    </td>
                                    <td>
                                        <span title={item.hosp_name}>{item.hosp_name}</span>
                                    </td>
                                    <td className='yellow'>
                                        {Math.round(item.client_sign)}
                                    </td>
                                    <td className='yellow'>
                                        {Math.round(item.client_back)}
                                    </td>
                                    <td className='yellow'>
                                        {Math.round(item.client_income)}
                                    </td>
                                </tr>)
                            })
                        }

                    </tbody>
                </table>
            </div>
        )
    }
}
export default OutputTable;